site_8g/src/app/[locale]/template.tsx

"use client";

import { usePathname } from "@/i18n/routing";
import { AnimatePresence, motion } from "framer-motion";
import { ReactNode } from "react";
const Template = ({ children }: { children: ReactNode }) => {
    const key = usePathname();
    return (
        <AnimatePresence mode="popLayout">
            <motion.div
                layout
                key={key}
                initial={{ x: 100, opacity: 0 }}
                animate={{ x: 0, opacity: 1 }}
                exit={{ x: 100, opacity: 0 }}
                transition={{
                    duration: 0.3,
                    ease: [0, 0.71, 0.2, 1.01],
                }}
                className={"h-[100%]"}
            >
                {children}
            </motion.div>
        </AnimatePresence>
    );
};

export default Template;